
import {Component} from 'react';
import { Group,Boxs,List } from 'saltui';
const { HBox, Box, VBox } = Boxs;

export default class CheckTimeField extends Component{

  constructor(props){
    super(props);
    var currentDate = new Date();
    var currentFormatDate = currentDate.format("yyyy-MM-dd");
    var currentHours = 0;
    var currentMinCount = 0;
    var isCurrent = false;
    if(currentFormatDate == this.props.selectDate){
      currentHours = currentDate.getHours();
      var currentMin = currentDate.getMinutes();
      currentMinCount = Math.ceil((currentMin/15));
      isCurrent = true;
    }
    this.state = {
      prevElement: null,
      isActive: true,
      currentHours: currentHours,
      isCurrent: isCurrent,
      currentMinCount: currentMinCount,
      hours: ["00:00","01:00","02:00","03:00","04:00","05:00",
               "06:00","07:00","08:00","09:00","10:00","11:00",
               "12:00","13:00","14:00","15:00","16:00","17:00",
               "18:00","19:00","20:00","21:00","22:00","23:00"]
    }
  }

 changeState(event) {
    var target = event.target,//当前点击的对象
    curr = target.getAttribute("data-value"),
    classList = target.classList;
    var pos=[];//记录两次点击的下标
    var prevElement = this.state.prevElement;
    if(prevElement){
      var currentHours = this.state.currentHours;
      pos.push(parseInt(target.getAttribute("id"))-currentHours*4-1);
      pos.push(parseInt(prevElement.getAttribute("id"))-currentHours*4-1);
    }
     //判断时间段是否可选
    if(classList.contains('t-BCf')){
      classList.remove('t-BCf');
      classList.add('t-BCblue');
      target.setAttribute("data-value","1");
    }else if(classList.contains('t-BCblue')){
      //选择之后可取消
      var blueNodelist = document.getElementsByClassName("t-BCblue");
      if(prevElement && prevElement.getAttribute("id") == target.getAttribute("id") && blueNodelist.length==1){
        classList.remove('t-BCblue');
        classList.add('t-BCf');
        target.setAttribute("data-value","0");
      }
   }

    //查找所有的时间段节点
    var nodeList= document.getElementsByClassName("time-box");//所有的子元素
    var blueNodelist = document.getElementsByClassName("t-BCblue");
    //选择时间段
   if(blueNodelist.length > 1){
      while(blueNodelist.length>0){
        blueNodelist[0].setAttribute("data-value","0");
        var classList = blueNodelist[0].classList;
        classList.remove("t-BCblue");
        classList.add("t-BCf");
      }

      var i = 0, length = 0;
      if(pos[0] > pos[1]){
        i = pos[1];
        length = pos[0];
      }else{
        i = pos[0];
        length = pos[1];
      }

      for(i;i<=length;i++){
        if(nodeList[i].getAttribute("data-value")=='0'){
          nodeList[i].setAttribute("data-value","1");
          nodeList[i].classList.add('t-BCblue');
          nodeList[i].classList.remove('t-BCf');
        }
      }
    }
    this.state.prevElement = target;
    var len = blueNodelist.length;
    if(len > 0){
      var start = blueNodelist[0].getAttribute("id");
      var end = blueNodelist[len-1].getAttribute("id");

      var min = parseInt(start)%4;
      var startHours = parseInt(start/4); 
      var startMin = 0;
      if(min == 0){
        startHours = startHours-1;
        startMin = 3*15;
      }else{
        startMin = (parseInt(start)%4-1)*15;
      }
      
      var endHours = parseInt(end/4);
      var endMin = (parseInt(end)%4)*15;

      var mul = parseInt(end) - parseInt(start) + 1;
      var canAdd = true;
      if(mul != len){
        canAdd = false;
      }

      var params = {
        startTime: (startHours<10?"0"+startHours:startHours)+":"+(startMin<10?"0"+startMin:startMin),
        endTime: (endHours<10?"0"+endHours:endHours)+":"+(endMin<10?"0"+endMin:endMin),
        canAdd: canAdd
      };
      this.props.onSelected(params);
    }
  }
  render() {
    var currentHours = this.state.currentHours;
    var currentMinCount = this.state.currentMinCount;
    var isCurrent = this.state.isCurrent;
    var startTime = this.props.startTime.split(":");
    var startNum = parseInt(startTime[1])/15;
    var endTime = this.props.endTime.split(":");
    var endNum = parseInt(endTime[1])/15;
    var indexMap = [1,2,3,4];
    var times = this.props.times.split(",");
    var t = this;
    var selectBox = t.state.hours.map((item,index) => {
      if(index >= currentHours){
        var boxHtml = indexMap.map((item1,index1) => {
          var boxCalss = "t-H32 t-ML16 t-BCf time-box";
          var dataValue = "0"
          var currentIndex = index*4 + item1;
          var currentTimeIndex = "";
          if(isCurrent && index==currentHours && currentMinCount>=item1){
            currentTimeIndex = currentHours*4 + item1;
          }

          if(currentIndex == currentTimeIndex){
            boxCalss = "t-H32 t-ML16 t-BCd time-box";
            dataValue = "3";
          }
          if(times.indexOf(currentIndex+"") >= 0){
            boxCalss = "t-H32 t-ML16 t-BCoranger time-box";
            dataValue = "3";
          }
          if(currentIndex<=parseInt(startTime[0])*4+startNum || currentIndex>parseInt(endTime[0])*4+endNum){
            boxCalss = "t-H32 t-ML16 t-BCd time-box";
            dataValue = "3";
          }
          
          return (
            <Box flex={1}  className={ boxCalss } data-value={ dataValue } id={currentIndex} onClick={t.changeState.bind(this)} ></Box>
          );
        });
        return (
          <HBox className="t-PT8 t-PB8">
            { boxHtml }
          </HBox>
        )
     }
    });
    var selectTimes = this.state.hours.map((item,index) => {
      if(index >= currentHours){
        return (<p className="dd-t-list-title-single omit t-H48 t-LH48">{item} </p>);
      }
    });
    return (
    <Group.List>
      <div className="dd-t-list-wrap-single"  ref="checkTime">
          <HBox vAlign="center"  className="t-PT8 t-PB8">
            <Box>
              { selectTimes }
            </Box>
            <VBox flex={1}>
              { selectBox }
            </VBox>
          </HBox>
        </div>
      </Group.List>
    );
  }
}

